<template>
  <div>
    <el-row>
      <el-col :span="12">
        <el-form-item label="所属系统" prop="systemName">
          <el-select v-model="form.systemName" placeholder="请选择" disabled clearable style="width:260px">
            <el-option
              v-for="item in systemList"
              :key="item.pkId"
              :label="item.sourceType"
              :value="item.pkId"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="选择数据连接" prop="sourceConnPkId">
          <el-select v-model="form.sourceConnPkId" placeholder="请选择" filterable clearable style="width:260px" @change="getDatabaseByDataSource()">
            <el-option
              v-for="item in targetDataSourceList"
              :key="item.pkId"
              :label="item.sourceName"
              :value="item.pkId"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="数据库名" prop="schemaName">
          <el-select v-model="form.schemaName" placeholder="请选择" filterable clearable style="width:260px" @change="getTableByDatabase()">
            <el-option
              v-for="item in dataDbList"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="表名" prop="tableName">
          <el-select v-model="form.tableName" placeholder="请选择" filterable clearable style="width:260px">
            <el-option
              v-for="item in dataTableList"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import dataSourceApi from '@/api/metadata/dataSource'

export default {
  name: 'DqcWorkManageList',
  props: {
    form: {
      required: true,
      type: Object
    }
  },
  data() {
    return {
      systemList: [],
      targetDataSourceList: [],
      dataDbList: [],
      dataTableList: [],
      schemaName: ''
    }
  },
  created() {
    this.initData()
  },
  methods: {
    // 进入页面后初始化信息
    initData() {
      this.getDataSource()
      if (this.form.sourceConnPkId !== '') {
        this.getDatabaseByDataSource()
        this.getTableByDatabase()
      }
    },
    // 获取数据源信息
    getDataSource() {
      const param = { sourceAttribute: 'target', status: 'ENABLE', size: 500 }
      dataSourceApi.findListByPage(param).then(data => {
        this.targetDataSourceList = data.content.filter(item => item.sourceType === 'GAUSS')
      })
    },
    // 根据数据源信息获取数据库列表
    getDatabaseByDataSource() {
      if (this.form.sourceConnPkId !== '') {
        dataSourceApi.schemas(this.form.sourceConnPkId).then((data) => {
          this.dataDbList = data
        })
      } else {
        this.form.schemaName = ''
        this.form.tableName = ''
      }
    },
    // 根据数据库信息获取表信息
    getTableByDatabase() {
      if (this.form.schemaName !== '') {
        const params = {
          pkId: this.form.sourceConnPkId,
          schema: this.form.schemaName
        }
        dataSourceApi.tables(params).then((data) => {
          this.dataTableList = data
        })
      } else {
        this.form.tableName = ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
